<template>
  <div >
    <el-row >
      <el-col :span="6" class="tou">
        <el-upload
              class="avatar-uploader"
              action=" http://localhost:3000/api/self/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span>头像</span>
      </el-col>
      <el-col :span="18">
        <el-form :model="infoForm" :rules="infoRules" ref="infoForm" label-width="100px" class="infotable">
          <el-form-item label="姓名" prop="name">
              <el-input v-model="infoForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
              <el-input v-model="infoForm.password"></el-input>
          </el-form-item>
          <el-form-item label="生日">
              <el-col :span="11">
                  <el-date-picker type="date"  v-model="infoForm.birthday" value-format="yyyy-MM-dd">
                  </el-date-picker>
              </el-col>
          </el-form-item>
          <div class="btn">
              <el-button type="primary" round @click="commit">确认修改</el-button>
              <el-button type="warning" round @click="returned">取消修改</el-button>
          </div>
      </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '@/util/http'
import { Message } from 'element-ui'
export default {
  mounted () {
    this.render()
  },
  data () {
    return {
      infoForm: {
        name: '',
        password: '',
        birthday: ''
      },
      imageUrl: '',
      infoRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      info: {
        token: window.localStorage.getItem('token')
      }
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    commit () {
      this.$refs.infoForm.validate(valid => {
        if (valid) {
          http.post('/api/self/updata', {
            msg: this.infoForm,
            msg1: this.info
          }).then(res => {
            if (res.data.code === 1) {
              Message.success('信息修改成功')
            } else {
              Message.success('信息修改失败')
            }
          })
        }
      })
    },
    returned () {
      this.render()
      this.$refs.infoForm.clearValidate()
    },
    render () {
      http.get('/api/self', { params: this.info }).then(res => {
        console.log(res.data)
        if (res.data.code === 1) {
          this.infoForm.name = res.data.msg[0].name
          this.infoForm.password = res.data.msg[0].password
          this.infoForm.birthday = res.data.msg[0].date
          this.imageUrl = 'http://localhost:3000/' + res.data.msg[0].pho
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .infotable{
        padding:6.25rem 3.125rem;
        .btn{
                display: flex;
                justify-content: space-around;
            }
    }
    .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    //overflow: hidden;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  }

  .el-row{
    width: 100%;
    height: 37.5rem;
    padding: 6.25rem .625rem;
    .tou{
     margin-top:6.25rem ;
     span{
      padding-left: 5rem;
      text-align: center;
     }
    }
  }

</style>
